<template>
  <template v-for="item, index in splits" :key="index">
    <span v-if="item.keyword" :class="'ee-highlight' + (text ? ' text' : '')">{{ item.label }}</span>
    <template v-else>{{ item.label }}</template>
  </template>
</template>

<script type="text/javascript">
// 可以配合 [].search 功能的结果集对字符串进行展示
import { getSplitIndexes } from '../__use/search'

export default {
  name: "ee-highlight",
  props: {
    /** 默认搜索是背景亮起来，text可以让文字换颜色 */
    text: Boolean,
    /** Array.prototype.search 搜索出来的 search 字段内容 */
    search: Object,
  },
  computed: {
    /** 将字符串分段 */
    splits() {
      if (!this.search)
        return [];
      return this.search?.getSplitIndexes?.() || getSplitIndexes(this.search);
    }
  },
}
</script>

<style lang="scss">
.ee-highlight {
  background-color: var(--ee-highlight);

  &.text {
    color: var(--ee-highlight-text);
    background-color: unset;
  }

  &.focus {
    color: inherit;
    background-color: var(--ee-highlight-text);
  }
}
</style>